import { Layout, Menu } from 'antd';
import './index.less'
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    UserOutlined,
    ContainerOutlined,
    BookOutlined,
    SearchOutlined,
    SmileOutlined
} from '@ant-design/icons';
import styles from './index.less'
import React, { useState } from 'react';
import { IRouteComponentProps, Link } from 'umi';
import Createbtn from '@/components/CreateBtn'
import CommonHerder from '@/components/CommonHeader'

const { Header, Sider,  } = Layout;
const { SubMenu } = Menu;

const whiteList = ['/']
const WhiteListLink = ['/', '/article', '/article/category', '/article/tags', '/page', '/knowledge', '/poster', '/comment', '/mail', '/file', '/search', '/view', '/user', '/setting', '/ownspace']
function Layouts(this: any, { children, location}: IRouteComponentProps) {
    let body = children;
    if (whiteList.indexOf(location.pathname) !== -1) {
        body = <div className="container content">
            {children}
        </div>
    }

    let [collapsed, setCollapsed] = useState(false)
    localStorage.setItem('collapsed', collapsed as unknown as string)
    function toggle() {
        setCollapsed(!collapsed)
    }
   
    if (WhiteListLink.includes(location.pathname) === false) {
        return <div className='editor'>
            {body}
        </div>
    } else {
        return <Layout>
            <Sider className={styles.menu} trigger={null} collapsible collapsed={collapsed}>
                <div className="logo" />
                <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']} >
                    <div className={styles.img}>
                        <img src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-02-20/wipi-favicon.png" alt="" />
                        {
                            collapsed === false ? <span>管理后台</span> : null
                        }
                    </div>
                    <div className={styles.create}>
                        <Createbtn></Createbtn>
                    </div>
                    <Menu.Item key="1" icon={<SmileOutlined />}>
                        <Link to={'/'}>工作台</Link>
                    </Menu.Item>
                    <SubMenu key="sub1" icon={<UserOutlined />} title="文章管理">
                        <Menu.Item key="3">
                            <Link to={'/article'}>所有文章</Link>
                        </Menu.Item>
                        <Menu.Item key="4">
                            <Link to={'/article/category'}>分类管理</Link>
                        </Menu.Item>
                        <Menu.Item key="5">
                            <Link to={'/article/tags'}>标签管理</Link>
                        </Menu.Item>
                    </SubMenu>
                    <Menu.Item key="6" icon={<ContainerOutlined />}>
                        <Link to={'/page'}> 页面管理</Link>
                    </Menu.Item>
                    <Menu.Item key="7" icon={<BookOutlined />}>
                        <Link to={'/knowledge'}> 知识小册</Link>
                    </Menu.Item>
                    <Menu.Item key="8" icon={<SearchOutlined />}>
                        <Link to={'/poster'}> 海报管理</Link>
                    </Menu.Item>
                    <Menu.Item key="9" icon={<SearchOutlined />}>
                        <Link to={'/comment'}> 评论管理</Link>
                    </Menu.Item>
                    <Menu.Item key="10" icon={<SearchOutlined />}>
                        <Link to={'/mail'}> 邮件管理</Link>
                    </Menu.Item>
                    <Menu.Item key="11" icon={<SearchOutlined />}>
                        <Link to={'/file'}> 文件管理</Link>
                    </Menu.Item>
                    <Menu.Item key="12" icon={<SearchOutlined />}>
                        <Link to={'/search'}> 搜索记录</Link>
                    </Menu.Item>
                    <Menu.Item key="13" icon={<SearchOutlined />}>
                        <Link to={'/view'}> 访问统计</Link>
                    </Menu.Item>
                    <Menu.Item key="14" icon={<SearchOutlined />}>
                        <Link to={'/user'}> 用户管理</Link>
                    </Menu.Item>
                    <Menu.Item key="15" icon={<SearchOutlined />}>
                        <Link to={'/setting'}> 系统设置</Link>
                    </Menu.Item>
                </Menu>
            </Sider>
            <Layout className="site-layout">
                <Header className="site-layout-background" style={{ padding: 0 }}>
                    {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                        className: 'trigger',
                        onClick: toggle,
                    })}
                    <CommonHerder></CommonHerder>
                </Header>
                <div className={styles.main}>
                    {body}
                </div>
            </Layout>
        </Layout>
    }



}
export default Layouts